<template>
  <div>
    <div p-5>
      <TaskInfo :id="route.query.id"></TaskInfo>
      <a-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        v-if="taskData?.checkTypeName == '监督检查'"
      >
        <div class="taskInfo-body-box" ref="bookBox">
          <div class="taskInfo-body-box-tittle">
            <div class="taskInfo-body-box-tittle-left"></div>
            <div class="taskInfo-body-box-tittle-right">处置方式</div>
          </div>
          <div class="taskInfo-body-box-infos">
            <a-row :gutter="24">
              <a-col class="gutter-row" :span="8">
                <a-form-item label="处理方式" name="processType">
                  <a-checkbox-group v-model:value="formState.processType" @change="onChangeCheck">
                    <a-row>
                      <a-col :span="24" v-for="item in checkData" :key="item.id">
                        <a-checkbox :value="item.value" :disabled="item.disabled">{{
                          item.label
                        }}</a-checkbox>
                      </a-col>
                    </a-row>
                  </a-checkbox-group>

                  <!-- <a-select v-model:value="formState.processType" placeholder="请选择处理方式">
                    <a-select-option :value="0">简易程序</a-select-option>
                    <a-select-option :value="1">一般程序</a-select-option>
                  </a-select> -->
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </div>
        <div class="taskInfo-body-box" v-if="showBook">
          <div class="taskInfo-body-box-tittle">
            <div class="taskInfo-body-box-tittle-left"></div>
            <div class="taskInfo-body-box-tittle-right">文书制作</div>
          </div>
          <div class="taskInfo-body-box-info">
            <a-row :gutter="24">
              <a-col class="gutter-row" :span="8">
                <BookCreate
                  :type="5"
                  :id="id"
                  :disabled="taskData?.nowCorrectFileUrl != ''"
                  :url="taskData?.orderCorrectFileUrl"
                  @getBookUrl="getBookUrl"
                />
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col class="gutter-row" :span="8">
                <a-form-item label="是否复查" name="reviewVal">
                  <a-select v-model:value="formState.reviewVal" placeholder="请选择是否复查">
                    <a-select-option :value="0">否</a-select-option>
                    <a-select-option :value="1">是</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </div>
      </a-form>
    </div>
    <div class="bottomBox"></div>
    <div class="bottomBtns" style="z-index: 3">
      <a-space :size="12">
        <a-button size="large" @click="cacel">取消</a-button>
        <a-button
          v-if="taskData?.checkTypeName == '监督检查'"
          size="large"
          type="primary"
          @click="onSubmit(1)"
          >暂存</a-button
        >
        <a-button
          v-if="taskData?.checkTypeName == '监督检查'"
          size="large"
          type="primary"
          @click="onSubmit(0)"
          >{{ formState.processType.includes('2') ? '提交审批' : '提交' }}</a-button
        >
        <a-button
          v-if="taskData?.checkTypeName == '复查'"
          size="large"
          type="primary"
          @click="onSubmit(3)"
          >受案登记</a-button
        >
        <a-button
          v-if="taskData?.checkTypeName == '其他'"
          size="large"
          type="primary"
          @click="onSubmit(4)"
          >提交</a-button
        >
      </a-space>
    </div>

    <a-modal title="提示" centered v-model:open="visible" :width="400" @ok="handleOk">
      确定结束任务？
    </a-modal>
  </div>
</template>
<script setup lang="ts">
  import { useRoute } from 'vue-router';
  import TaskInfo from '../task-view/components/taskInfo.vue';
  import BookCreate from '@/components/basic/book-create/index.vue';
  import router from '@/router';
  import { onMounted, reactive, ref } from 'vue';
  import { processTasks } from '@/api/supervision/handleTask';
  import { taskxfInfo } from '@/api/supervision/create-task';
  import { message } from 'ant-design-vue';
  import BeCurrent from '@/components/basic/book-create/components/beCurrent/index.vue';
  import { useTabsViewStore } from '@/store/modules/tabsView';
  import { values } from 'lodash-es';
  const tabsViewStore = useTabsViewStore();
  const route = useRoute();
  const cacel = () => {
    router.back();
  };
  const open = ref(false);

  const id = route.query.id as any;

  const getBookUrl = (data) => {
    if (data.code == 0) {
      taskxfInfoApi();
    }
  };

  const onSubmit = async (val) => {
    let params = {
      id: id,
      processType: formState.processType.join(','),
      reviewVal: '' as any,
    };
    if (val == 1) {
      // 监督检查 暂存
      params.reviewVal = formState.reviewVal;
      const res = await processTasks(val, params);

      if (res.code == 0) {
        message.success('已暂存');
        tabsViewStore.closeCurrentTabToUrl(route, '/supervision/supervision/task-management');
      }
    } else if (val == 3) {
      visible.value = true;
    } else if (val == 4) {
      visible.value = true;
    } else {
      // 监督检查 提交
      formRef.value
        .validate()
        .then(async () => {
          if (val == 0) {
            if (formState.processType.includes('2')) {
              // 责令改正
              if (
                (taskData.value?.nowCorrectFileUrl != '' && taskData.value?.punishFileUrl != '') ||
                taskData.value?.orderCorrectFileUrl != ''
              ) {
                params.reviewVal = formState.reviewVal;

                const res = await processTasks(0, params);
                if (res.code == 0) {
                  message.success('提交成功！');

                  if (formState.processType.includes('0')) {
                    // 还选了受案登记
                    // console.log('跳转立案 一般程序');
                    tabsViewStore.closeCurrentTabToUrl(route, '/administrative-penalty/register', {
                      taskId: id,
                    });
                  } else if (formState.processType.includes('1')) {
                    // 还选了当场处罚
                    // console.log('跳转立案 简易程序');
                    tabsViewStore.closeCurrentTabToUrl(route, '/administrative-penalty/registers', {
                      taskId: id,
                    });
                  } else {
                    // 只选了责令改正
                    // 原逻辑
                    tabsViewStore.closeCurrentTabToUrl(
                      route,
                      '/supervision/supervision/task-management',
                    );
                  }
                }
              } else {
                message.error('文书未制作！');
              }
            } else if (formState.processType[0] === '0') {
              // 受案登记 - 立案（一般程序）
              visible.value = true;
            } else if (formState.processType[0] === '1') {
              // 当场处罚 - 立案（当场处罚）
              visible.value = true;
            }
          }
        })
        .catch((error) => {
          console.log('error', error);
        });
    }
  };

  const visible = ref(false);
  // 任务结束 ( 其他 , 只选择受案登记 , 只选择当场处罚)
  const handleOk = async () => {
    let params = {
      id: id,
      processType: formState.processType.join(','),
    };
    visible.value = false;
    if (taskData.value.checkTypeName == '其他') {
      // 其他
      const res = await processTasks(0, { id: id });
      if (res.code == 0) {
        message.success('提交成功！');
        tabsViewStore.closeCurrentTabToUrl(route, '/supervision/supervision/task-management');
      }
    } else if (taskData.value.checkTypeName == '复查') {
      // 复查
      const res = await processTasks(0, { id: id });
      if (res.code == 0) {
        message.success('提交成功！');
        // 原逻辑 - 要转立案 处理
        // console.log('跳转立案 一般程序');

        tabsViewStore.closeCurrentTabToUrl(route, '/administrative-penalty/register', {
          taskId: id,
        });
      }
    } else if (taskData.value.checkTypeName == '监督检查') {
      const res = await processTasks(0, params);
      if (res.code == 0) {
        message.success('提交成功！');

        if (formState.processType[0] === '0') {
          // 原逻辑 - 要转立案 处理
          // console.log('跳转立案 一般程序');
          tabsViewStore.closeCurrentTabToUrl(route, '/administrative-penalty/register', {
            taskId: id,
          });
        } else if (formState.processType[0] === '1') {
          // 只选择当场处罚
          // console.log('跳转立案 简易程序');
          tabsViewStore.closeCurrentTabToUrl(route, '/administrative-penalty/registers', {
            taskId: id,
          });
        }
      }
    }
  };

  const formRef = ref();
  const labelCol = {
    span: 4,
  };
  const wrapperCol = {
    span: 20,
  };
  const formState = reactive({
    processType: [] as any, //处理方式 0 简易程序  1 一般程序
    reviewVal: undefined, //处理方式 0 简易程序  1 一般程序
  });

  const rules = {
    processType: [
      {
        required: true,
        message: '请选择处理方式',
        trigger: 'change',
      },
    ],

    reviewVal: [
      {
        required: true,
        message: '请选择是否复查',
        trigger: 'change',
      },
    ],
  } as any;

  const taskData = ref();

  const taskxfInfoApi = async () => {
    const data = await taskxfInfo(route.query.id);
    taskData.value = data;
  };

  const showBook = ref(false);
  const bookBox = ref();

  const checkData = reactive([
    {
      id: 0,
      label: '受案登记',
      disabled: false,
      value: '0',
    },
    {
      id: 1,
      label: '当场处罚',
      disabled: false,
      value: '1',
    },
    {
      id: 2,
      label: '责令改正',
      disabled: false,
      value: '2',
    },
  ]);
  const onChangeCheck = (e) => {
    console.log(e);
    // 勾选受案登记
    if (e.includes('0')) {
      checkData[1].disabled = true;
    } else {
      checkData[1].disabled = false;
    }
    // 勾选当场处罚
    if (e.includes('1')) {
      checkData[0].disabled = true;
    } else {
      checkData[0].disabled = false;
    }
    // 勾选责令改正
    if (e.includes('2')) {
      showBook.value = true;
      formState.reviewVal = undefined;
      setTimeout(() => {
        // @ts-ignore
        document.getElementById('contentBox').scrollTop = 700;
      }, 200);
    } else {
      showBook.value = false;
    }
  };

  onMounted(async () => {
    if (route.query.id) {
      const data = await taskxfInfo(route.query.id);
      taskData.value = data;

      formState.processType = taskData.value.processType.split(',');
      formState.reviewVal = taskData.value.reviewVal;

      if (taskData.value.processType.split(',').includes('2')) {
        showBook.value = true;
      } else if (taskData.value.processType.split(',').includes('1')) {
        checkData[0].disabled = true;
      } else if (taskData.value.processType.split(',').includes('0')) {
        checkData[1].disabled = true;
      }
    }
  });
</script>
<style lang="less" scoped>
  .taskInfo {
    &-body {
      &-box {
        margin-bottom: 16px;

        &-tittle {
          display: flex;
          align-items: center;
          padding: 13px 0;

          &-left {
            height: 14px;
            margin-right: 7px;
            border: 1px solid #0f53ac;
            border-radius: 4px;
          }

          &-right {
            color: rgb(68 68 68 / 100%);
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
          }
        }
      }
    }
  }
</style>
